<template>
  <div class="staff-select">
    <a-select
      v-model="staff.staffId"
      v-model:popup-visible="popupVisible"
      :trigger-props="{ updateAtScroll: true }"
      :error="staff.staffStatusName != undefined"
      :fallback-option="errStaff"
      :loading="loading"
      :popup-container="popupContainer"
      filter-option
      placeholder="请选择"
      allow-clear
      allow-search
      @search="fetchListApi"
      @focus="handerFoucus"
      @clear="handleClear"
      @change="handleChange"
    >
      <a-option v-for="item in staffList" :key="item.value" :value="item.value" :label="item.label">
        <a-tag :color="item.option.status == 1 ? 'blue' : item.option.status == 2 ? 'gray' : 'orange'">{{ item.option.statusName }}</a-tag>
        {{ `${item.label}` }}
      </a-option>
    </a-select>
    <span class="error_wrap error_text">{{ staff.staffStatusName }}</span>
  </div>
</template>

<script setup>
  import { nextTick, ref, watch } from 'vue'
  import { getStaffList } from '@/api/business/workorder'

  const props = defineProps({
    isOpenCarHousekeep: Number,
    carHousekeepList: Array,
    index: Number,
    storeInfo: Object,
    popupContainer: {
      type: String,
      default: '.staff-select',
    },
  })

  const emits = defineEmits(['change'])

  // 切换员工或者清空
  const handleClear = () => {
    staff.value.staffId = undefined
  }
  const handleChange = async () => {
    await nextTick()
    staff.value.staffStatus = undefined
    staff.value.staffStatusName = undefined
    // 判断重复
    const carHousekeepList = props.carHousekeepList

    // 都没有值的时候 第一个提示必填
    let isEmpty = carHousekeepList.every((item) => !item.staffId)
    if (props.isOpenCarHousekeep == 1) carHousekeepList[0].staffStatusName = isEmpty ? '请至少配置一位车管家' : undefined
    // 判断重复 begin
    let setArr = carHousekeepList.map((item) => item.staffId)
    !isEmpty &&
      carHousekeepList.forEach((item, index) => {
        item.staffStatusName =
          setArr.filter((it) => it == item.staffId && it != undefined).length > 1
            ? '选择重复，请重新选择'
            : ['请至少配置一位车管家', '选择重复，请重新选择', '选择重复，请重新选择'].includes(item.staffStatusName)
            ? undefined
            : item.staffStatusName
      })
    // 判断重复 end
    // 触发校验
    emits('change')
  }

  // 获取焦点拉取数据
  const handerFoucus = () => {
    fetchListApi()
  }
  // 获取下拉列表
  const staffList = ref([])
  const loading = ref(false)
  const fetchListApi = (val) => {
    loading.value = true
    getStaffList({
      // 未生效的配置
      // oldIdList: staff.value.staffId ? [staff.value.staffId] : undefined,
      likeRealname: val,
      siteIdList: [props.storeInfo.siteId],
    }).then((res) => {
      loading.value = false
      if (res.code == 200) {
        staffList.value = res.result.map((item) => {
          return {
            label: item.namePhone,
            value: item.id,
            option: item,
          }
        })
      }
    })
  }

  // 下拉框显示与隐藏参数
  const popupVisible = ref(false)
  const popupVisibleFn = () => {
    popupVisible.value = false
  }

  const errStaff = () => {
    const noFind = staffList.value.find((item) => item.value == staff.value.staffId) == undefined
    if ((staff.value.staffId && staff.value.staffStatusName) || noFind) {
      return {
        label: staff.value.staffName + '，' + staff.value.staffPhone,
        key: staff.value.staffId,
        value: staff.value.staffId,
        disabled: true,
      }
    }
  }
  // 获取员工
  const staff = ref({})
  watch(
    () => props.carHousekeepList,
    (val) => {
      if (val) {
        staff.value = props.carHousekeepList[props.index]
      }
    },
    { immediate: true }
  )

  defineExpose({ popupVisibleFn })
</script>

<style lang="less" scoped>
  .error_text {
    font-size: 12px;
    color: #f76964;
    line-height: 17px;
  }

  .staff-select {
    position: relative;
    width: 100%;
    position: relative;
    margin-bottom: 16px;
    .error_wrap {
      position: absolute;
      left: 6px;
      bottom: -16px;
    }
  }
</style>
